<template>
    <div>
        <span
            v-show="state.showData"
            :class="`threshold-value-${state.thresholdStatus}`"
        >
            {{ (Math.round(state.value * 100) / 100).toFixed(2)
            }}{{ state.suffix }}{{ "&nbsp&nbsp" }}
            <i
                :class="`fa fa-long-arrow-${
                    state.upAndDown
                } arrowColorR threshold-value-${
                    state.value > 0 ? 'positive' : 'negative'
                }`"
            ></i>
        </span>
        <span v-show="!state.showData"> - </span>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch, getCurrentInstance, nextTick } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

const props = defineProps({
    suffix: String,
    modelValue: Number,
});

const { proxy } = getCurrentInstance() as any;
const state = reactive({
    upAndDown: "up",
    value: 0,
    thresholdStatus: "default",
    showData: true,
    suffix: "",
    result: 0,
});

const init = (): void => {
    state.value = props.modelValue;
    state.suffix = props.suffix;
    if (isNaN(state.value) || state.value == null) {
        state.showData = false;
        return;
    } else {
        state.showData = true;
    }
    render();
};
const render = () => {
    if (state.value > 10) {
        state.thresholdStatus = "positive";
        state.upAndDown = "up";
    }
    if (state.value <= 10 && state.value >= -10) {
        state.thresholdStatus = "default";
        state.value > 0 ? (state.upAndDown = "up") : (state.upAndDown = "down");
    }
    if (state.value < -10) {
        state.thresholdStatus = "negative";
        state.upAndDown = "down";
    }
};
onMounted(() => {
    init();
});

watch(
    () => props.modelValue,
    () => {
        init();
    }
);
</script>

<style scoped>
.threshold-value-negative {
    color: #67c23a;
}

.threshold-value-positive {
    color: #f56c6c;
}

.threshold-value-default {
    color: #808080;
}
</style>
